<script setup lang='ts' name="role-authority-add">
import type { FieldValues, PlusColumn } from 'plus-pro-components'

import { getCompanyOrg, updateAdminRoles, userAuthInfo } from '@fl/api/iam-api'
import { ElButton, ElCard } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const form = ref<FieldValues>({
    description: '',
    display_name: '',
    org_id: '',
    // roleList: [],
    sort_num: 0,
})
const rules = {
    description: [
        {
            message: '请输入标签',
            required: true,
        },
    ],
    display_name: [
        {
            message: '请输入名称',
            required: true,
        },
    ],
}
const columns: PlusColumn[] = [
    {
        colProps: {
            span: 12,
        },
        label: '角色名称',
        prop: 'display_name',
        valueType: 'copy',
        width: 120,
    },
    {
        colProps: {
            span: 8,
        },
        label: '所属机构',
        options: async () => {
            const data = await getCompanyOrg({
                page: 1,
                size: 9999,
            })
            return data.map((item: { objectID: number | string, qiymc: string }) => {
                return {
                    label: item.qiymc,
                    value: item.objectID,
                }
            })
        },
        prop: 'org_id',
        valueType: 'select',
        width: 120,
    },
    {
        fieldProps: {
            autosize: { maxRows: 10, minRows: 4 },
            maxlength: 10,
            showWordLimit: true,
        },
        label: '角色描述',
        prop: 'description',
        valueType: 'textarea',
    },
    // {
    //     label: '全部成员',
    //     prop: 'roleList',
    //     valueType: '',
    // },
    {
        colProps: {
            span: 12,
        },
        fieldProps: { min: 0, precision: 0, step: 1 },
        label: '排序号',
        prop: 'sort_num',
        valueType: 'input-number',
    },
]

function handleSubmit(values: FieldValues) {
    console.log(values, 'Submit')
    userAuthInfo().then((res) => {
        updateAdminRoles({ ...form.value, org_id: res.org_id }).then((result: any) => {
            if (result?.id)
                backSectionPage()
            else
                ElMessage.error(result)
        })
    })
}

function handleSubmitError(err: any) {
    console.log(err, 'err')
}

function backSectionPage() {
    router.push('/admin/authority')
}
</script>

<template>
    <div style="width: 100%;height: 100vh;">
        <ElCard style="width: 100%;height: 100%;"
                class="mb-20"
        >
            <div mb-40>
                <ElButton @click="backSectionPage">
                    返回列表
                </ElButton>
            </div>

            <PlusForm v-model="form"
                      :columns="columns"
                      :rules="rules"
                      :row-props="{ gutter: 20 }"
                      :col-props="{
                          span: 16,
                      }"
                      label-position="top"
                      footer-align="center"
                      submit-text="保存"
                      reset-text="取消"
                      @submit="handleSubmit"
                      @submit-error="handleSubmitError"
                      @reset="backSectionPage"
            />
        </ElCard>
    </div>
</template>

<style lang="scss" scoped>
:deep(.el-button--primary) {
    margin-right: 20px;
}

:deep(.plus-form__footer) {
    flex-direction: row-reverse !important;
}
</style>
